<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./css/reset.css">
    <link rel="stylesheet" href="./css/index.css">
    <title>Document</title>
</head>
<body>
<div class="container">
    <!-- 搜索框 -->
    <div class="search">
        <div class="input">
            <input type="text" placeholder="搜索：目的地/酒店/景点/航班号">
        </div>
        <div class="userlogo">
            <a href=""></a>
            <span>我的</span>
        </div>
    </div>
    <!-- 轮播图 -->
    <div class="show">
        <div class="banner">
            <ul>
                <li><img src="https://dimg04.c-ctrip.com/images/0zg6z120009hxl5q9CCF7.jpg" alt=""></li>
                <li><img src="./imgs/focus.jpg" alt=""></li>
            </ul>
        </div>
    </div>
    <!-- 导航 -->
    <div class="title">
        <ul>
            <li><a href=""><img src="https://pages.c-ctrip.com/basebiz/h5home/v1/nav/main/hotel.png" alt=""></a><span>酒店</span></li>
            <li><a href=""><img src="https://pages.c-ctrip.com/basebiz/h5home/v1/nav/main/flight.png" alt=""></a><span>飞机</span></li>
            <li><a href=""><img src="https://pages.c-ctrip.com/basebiz/h5home/v1/nav/main/train_ticket.png" alt=""></a><span>火车票</span></li>
            <li><a href=""><img src="https://pages.c-ctrip.com/basebiz/h5home/v1/nav/main/vacation.png" alt=""></a><span>旅游</span></li>
            <li><a href=""><img src="https://pages.c-ctrip.com/basebiz/h5home/v1/nav/main/gs.png" alt=""></a><span>景点</span></li>
        </ul>
    </div>
    <!-- 导航结束-->


    <!-- 内容区域 -->
    <div class="main">
        <div class="hotel">
            <div class="main-left">
                <span>酒店</span>
                <img src="https://pages.c-ctrip.com/basebiz/h5home/v1/nav/main/hotel.png" alt=""> 
            </div>
            <div class="main-right">
                <div class="main-right01">
                    <div class="top flex1">海外酒店</div>
                    <div class="botton flex1">特价酒店</div>
                </div>
                <div class="main-right02">
                    <div class="top flex1">团购</div>
                    <div class="botton flex1">名宿·客栈</div>
                </div>
            </div>
        </div>
        <div class="hotel">
            <div class="main-left" style="background-color: #4c93ed;">
                <span>机票</span>
                <img src="https://pages.c-ctrip.com/basebiz/h5home/v1/nav/main/flight.png" alt=""> 
            </div>
            <div class="main-right">
                <div class="main-right01">
                    <div class="top flex1" style="background-color: #4ea1ee;">火车票</div>
                    <div class="botton flex1" style="background-color: #4ea1ee;">特价机票</div>
                </div>
                <div class="main-right02">
                    <div class="top flex1"style="background-color: #51afed;">汽车票·船票</div>
                    <div class="botton flex1"style="background-color: #51aeee;">专车·租车</div>
                </div>
            </div>
        </div>
        <div class="hotel">
            <div class="main-left" style="background-color: #39c2a7;">
                <span>旅游</span>
                <img src="https://pages.c-ctrip.com/basebiz/h5home/v1/nav/main/vacation.png" alt=""> 
            </div>
            <div class="main-right">
                <div class="main-right01">
                    <div class="top flex1" style="background-color: #4cc88b;">门票</div>
                    <div class="botton flex1" style="background-color: #4bc78d;">目的地攻略</div>
                </div>
                <div class="main-right02">
                    <div class="top flex1" style="background-color: #5ecd72;">邮轮旅行</div>
                    <div class="botton flex1" style="background-color: #5dcd73;">定制旅游</div>
                </div>
            </div>
        </div>
    </div>
    <!-- 内容区域结束 -->
    <!-- 图标 -->
    <div class="pics">
        <div class="top">
            <div class="flex1"><a href="" class="pic1"></a><span>出行</span></div>
            <div class="flex1"><a href="" class="pic2"></a><span>通信</span></div>
            <div class="flex1"><a href="" class="pic3"></a><span>安全</span></div>
            <div class="flex1"><a href="" class="pic4"></a><span>理财</span></div>
            <div class="flex1"><a href="" class="pic5"></a><span>出行安全</span></div>
        </div>
        <div class="bottom">
            <div class="flex1"><a href="" class="pic1"></a><span>机票兑换</span></div>
            <div class="flex1"><a href="" class="pic2"></a><span>会员签到</span></span></div>
            <div class="flex1"><a href="" class="pic3"></a><span>礼品卡</span></div>
            <div class="flex1"><a href="" class="pic4"></a><span>拿去花</span></div>
            <div class="flex1"><a href="" class="pic5"></a><span>更多</span></div>
        </div>

    </div>
    <!-- 图标结束 -->
    <div class="test"></div>
    <!-- 底部 -->
    <div class="footer">
        <div class="flex1"><a href="" class="pic1"></a><span>首页</span></div>
        <div class="flex1"><a href="" class="pic2"></a><span>社区</span></div>
        <div class="flex1"><a href="" class="pic3"></a><span>信息</span></div>
        <div class="flex1"><a href="" class="pic4"></a><span>我的</span></div>
    </div>
    <!-- 底部结束 -->
    <!-- 页脚 -->
    <div class="last">
        <div>  <img src="./imgs/logo.png" alt=""></div>
    </div>
    <div class="info" style="text-align: center;">
        <span>©2022携程旅行&nbsp沪ICP备08023580号</span>
    </div>
    <!-- 页脚结束 -->
    <div class="adv"></div>
</body>
</html>